<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();//获得项目的根目录，上下文路径
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>超市账单管理系统</title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.js"></script>
<script src="js/js.js"></script>
<script type="text/javascript">
	//1、测试用户角色编码是否唯一$.ajax()
	$(function(){
		$("#roleCode").blur(function () {
			testRoleCode($(this));
		});
	});
	
	function testRoleCode(t){
		var v  = t.val();
		var sp = t.next();
		var div = t.parent();
		sp.empty();
		var flag =false;
		$.ajax({
			url:"testRoleCode.html",
			data:{roleCode:v},
			type:"POST",
			dataType:"json",
			success:function(res){
				//如果占用返回false，否则反回true
				console.log(res);
				flag = res.result;
				if(!flag){
					sp.html(v+"亲,不可用");
					div.removeClass("ok").addClass("error");
				}else{
					sp.html(v+"亲,可用");
					div.removeClass("error").addClass("ok");
				}
			},
			error:function(e){
				alert("亲,请求出错了，"+e);
			},
			cache:false,
			async:false//同步请求
		});
		return flag;
	}
	//2、测试用户角色名称是否唯一$.post()
$(function(){
		$("#roleName").blur(function () {
			testRoleName($(this));
		});
	});
	function testRoleName(t){
		//1
		var v= t.val();
		var sp = t.next();
		var div = t.parent();
		sp.empty();
		$.ajaxSettings.async=false;//设置ajax同步
		var flag = false ;
		//2
		$.post(
			"testRoleName.html",
			{
				roleName :v
			},
			function(res){
				console.log(res);
				flag = res.result;
				if(!flag){
					sp.html(v+"亲,不可用");
					div.removeClass("ok").addClass("error");
				}else{
					sp.html(v+"亲,可用");
					div.removeClass("error").addClass("ok");
				}
			},
			"json"	
		);
		$.ajaxSettings.async=true;//设置ajax异步
		//3 
		return flag;
	}

</script>
</head>
<body>
	<!--头部-->
	<!-- <button id="btn">ajax</button> -->
	<header class="publicHeader">
		<h1>超市账单管理系统</h1>
		<div class="publicHeaderR">
			<p>
				<span>下午好！</span>
				<span style="color: #fff21b"> ${USER_LOGIN.userName }</span>
				, 欢迎你！
			</p>
			<a href="logOut.html">退出</a>
		</div>
	</header>
	<!--时间-->
	<section class="publicTime">
		<span id="time">2015年1月1日 11:11 星期一</span>
		<a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
	</section>
	<!--主体内容-->
	<section class="publicMian ">
		<div class="left">
			<h2 class="leftH2">
				<span class="span1"></span>
				功能列表
				<span></span>
			</h2>
			<nav>
				<ul class="list">
					<li><a href="billList.html">账单管理</a></li>
					<li><a href="providerList.html">供应商管理</a></li>
					<li><a href="userList.html">用户管理</a></li>
					<li id="active"><a href="roleList.html">角色管理</a></li>
					<li><a href="password.html">密码修改</a></li>
					 <li><a href="goodsList.du">商品购买</a></li>
					<li><a href="logOut.html">退出系统</a></li>
				</ul>
			</nav>
		</div>
		<div class="right">
			<div class="location">
				<strong>你现在所在的位置是:</strong>
				<span>角色管理>> 用户角色添加</span>
			</div>
			<div class="providerAdd">
				<form action="roleAdd.html" method="post" id="roleAdd">
					<div class="">
						<label for="roleCode">用户角色编码：</label>
						<input type="text" name="roleCode" id="roleCode" onkeyup="value=value.replace(/(^\s*)|(\s*$)/g,'')"/>
						<span>*请输入用户角色编码，且不能重复</span>
					</div>
					<div>
						<label for="roleName">用户角色名称：</label>
						<input type="text" name="roleName" id="roleName" onkeyup="value=value.replace(/(^\s*)|(\s*$)/g,'')"/>
						<span>*请输入用户角色名称</span>
					</div>
						<input type="hidden" name="roleCreatedBy" id="roleCreatedBy" value="${USER_LOGIN.id}"/>
					<div class="providerAddBtn">
						<input type="submit" style="padding: 0px;" />
						<input type="reset" style="padding: 0px; width: 100px; font-size: 14px;" />
					</div>
				</form>
			</div>
		</div>
	</section>
	<footer class="footer"> 版权归北大青鸟 </footer>
	<script src="js/time.js"></script>
</body>
</html>